<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"
	src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="../plugin/bootstrap/css/bootstrap.min.css" />
<script src="../js/jquery.cookie.js"></script>
</head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

.all a {
	text-decoration: none;
}

input {
	outline: none;
}

.all a:hover {
	border-top: 5px solid #FF5722;
	color: #FF5722;
}

body {
	background-color: #d2d2d2
}

input::-webkit-input-placeholder {
	/* placeholder颜色  */
	color: #aab2bd;
	/* placeholder字体大小  */
	font-size: 16px;
}

.all {
	margin-top: 140px;
	width: 1200px;
	height: 400px;
	background-color: #fff;
}

.login {
	margin-top: 20px;
	text-align: center;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}

.reg {
	margin-top: 20px;
	text-align: center;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}

.login a {
	color: black;
	font-size: 24px;
	font-weight: 3px;
}

.reg a {
	color: black;
	font-size: 24px;
	font-weight: 3px;
}

.UserName {
	margin-top: 10px;
}

.glyphicon-user {
	font-size: 30px;
}

.glyphicon-lock {
	font-size: 30px;
}

.UserName  span input {
	width: 335px;
	margin-top: 20px;
	border: transparent;
	border-bottom: 1px solid black;
}

.glyphicon-check {
	font-size: 30px;
}

.keycode input {
	width: 220px;
	margin-top: 20px;
	border: transparent;
	border-bottom: 1px solid black;
}

.keyimg {
	float: right;
	margin-right: 380px;
	margin-top: 34px;
}

.keyimg img {
	margin-top: 20px;
	margin-left: -40px;
	width: 100px;
	height: 41px;
}

.ok input {
	width: 210px;
	height: 30px;
	margin-left: -10px;
	margin-top: 20px;
	background-color: #FF5722;
}

.reset input {
	width: 160px;
	height: 30px;
	margin-top: 20px;
	background-color: #FFB800;
}

.income {
	margin-top: 80px;
	margin-left: 640px;
}
</style>
<body>
	<div class="container all">
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-2 login">
				<a href="./login">登录</a>
			</div>
			<div class="col-md-2 reg">
				<a href="./reg">注册</a>
			</div>
		</div>
		<!-- <form action="#"> -->
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-4 UserName">
				<span class="glyphicon glyphicon-user"><input type="text"
					name="userNum" id="userNum" placeholder="请输入用户名"></span>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-4 UserName">
				<span class="glyphicon glyphicon-lock"><input type="password"
					name="password" id="password" placeholder="请输入密码"></span>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-3 keycode">
				<span class="glyphicon glyphicon-check"><input type="text"
					name="keycode" id="keycode" placeholder="请输入验证码"></span>
			</div>
			<div class="col-md-1 keyimg">
				<img id="codeImg" src="../code/captcha"
					onclick="javascript:this.src='../code/captcha?rancode='+Math.random()"
					style="width: 80px; height: 36px; margin-top: -10px;">
			</div>
		</div>
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-2 ok">
				<input type="submit" id="login" value="确定">
			</div>
			<div class="col-md-2 reset">
				<input type="reset" value="重置">
			</div>
			<div class="income">
				电话号码注册成功<a href="./income">&nbsp;&nbsp;快捷登录</a>
			</div>
		</div>
		<!-- </form> -->
	</div>
</body>
<script type="text/javascript">
	$(function() {
		$("#login").click(function() {
			//alert("666")
			$.ajax({
				url : '../user/doLogin',
				dataType : "json",
				type : 'POST',
				cache : false,
				//async: true,//请求是否异步，默认为异步，这也是ajax重要特性
				data : {
					userNum : $("#userNum").val(),
					password : $("#password").val(),
					keycode : $("#keycode").val()
				}, //参数值
				success : function(data) {
					console.log(data.result);
					if (data.result == -1) {
						alert("验证码错误")
					}
					if (data.result == 0) {
						alert("用户名不存在！")
					}
					if (data.result == 1) {
						alert("用户名密码和验证码都正确！")
						window.location.href = "../home/index";
						$.cookie('username', $("#userNum").val(), {
							expires : 1,
							path : '../home/index'
						});
					}
					if (data.result == 2) {
						alert("存在两个相同的用户！")
					}
					if (data.result == 3) {
						alert("密码输入错误！")
					}
					if (data.result == "success") {
						alert("登录成功！")
					}
					console.log(data.result);
					//根据返回的数据进行处理
				},
				complete : function() {
					alert("处理完毕")
				},
				error : function() {
					alert("服务器暂时不可用")
				}
			});

		})

	})
</script>
</html>